<template>
	<view class="appointments-container">
    <!-- 填充区 -->
    <view class="statusBar" :style="{ height: getStatusBarHeight()+ 'px'}"></view>
		<view class="tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)"
			>
				<text>{{tab}}</text>
			</view>
		</view>
		
		<view class="appointment-list">
			<view v-if="filteredAppointments.length === 0" class="empty-state">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无预约记录</text>
			</view>
			
			<view 
				v-else
				class="appointment-item"
				v-for="(appointment, index) in filteredAppointments"
				:key="index"
			>
				<view class="appointment-header">
					<text class="appointment-id">预约号：{{appointment.id}}</text>
					<text class="appointment-status" :class="appointment.status">{{appointment.statusText}}</text>
				</view>
				
				<view class="appointment-content">
					<view class="info-row">
						<text class="label">接种点</text>
						<text class="value">{{appointment.site}}</text>
					</view>
					<view class="info-row">
						<text class="label">疫苗</text>
						<text class="value">{{appointment.vaccine}}</text>
					</view>
					<view class="info-row">
						<text class="label">预约时间</text>
						<text class="value">{{appointment.date}} {{appointment.time}}</text>
					</view>
					<view class="info-row" v-if="appointment.cancelReason">
						<text class="label">取消原因</text>
						<text class="value cancel-reason">{{appointment.cancelReason}}</text>
					</view>
				</view>
				
				<view class="appointment-footer">
					<button 
						class="btn cancel-btn" 
						v-if="appointment.status === 'pending'"
						@tap="cancelAppointment(appointment)"
					>取消预约</button>
					<button 
						class="btn detail-btn"
						@tap="viewAppointmentDetail(appointment)"
					>查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { getStatusBarHeight } from '@/utils/system'

const currentTab = ref(0)
const tabs = ref(['全部', '待接种', '已完成', '已取消'])

const appointments = ref([
	{
		id: 'AP001',
		site: '市第一人民医院',
		vaccine: '新冠疫苗（科兴生物）',
		date: '2024-01-20',
		time: '09:30',
		status: 'pending',
		statusText: '待接种'
	},
	{
		id: 'AP002',
		site: '市第二人民医院',
		vaccine: '新冠疫苗（国药集团）',
		date: '2024-01-15',
		time: '14:00',
		status: 'completed',
		statusText: '已完成'
	},
	{
		id: 'AP003',
		site: '社区卫生服务中心',
		vaccine: '新冠疫苗（科兴生物）',
		date: '2024-01-10',
		time: '10:30',
		status: 'cancelled',
		statusText: '已取消',
		cancelReason: '个人原因'
	}
])

const filteredAppointments = computed(() => {
	if (currentTab.value === 0) return appointments.value
	
	const statusMap = {
		1: 'pending',
		2: 'completed',
		3: 'cancelled'
	}
	
	return appointments.value.filter(item => item.status === statusMap[currentTab.value])
})

const switchTab = (index) => {
	currentTab.value = index
}

const cancelAppointment = (appointment) => {
	uni.showModal({
		title: '取消预约',
		content: '确定要取消该预约吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showLoading({
					title: '取消中...'
				})
				
				// TODO: 实现取消预约的逻辑
				setTimeout(() => {
					appointment.status = 'cancelled'
					appointment.statusText = '已取消'
					appointment.cancelReason = '用户取消'
					
					uni.hideLoading()
					uni.showToast({
						title: '取消成功',
						icon: 'success'
					})
				}, 1500)
			}
		}
	})
}

const viewAppointmentDetail = (appointment) => {
	uni.navigateTo({
		url: `/pages/appointment-detail/appointment-detail?id=${appointment.id}`
	})
}
</script>

<style lang="scss">
.appointments-container {
	min-height: 100vh;
	background-color: $uni-bg-color-grey;
  .statusBar{
    width: 100%;
    background-color: $uni-bg-color;
  }
	
	.tab-bar {
		display: flex;
		background-color: $uni-bg-color;
		padding: 10rpx 20rpx;
		position: sticky;
    border-top: 1px solid $uni-bg-color-grey;
		top: 0;
		z-index: 100;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			
			text {
				font-size: 28rpx;
				color: #666666;
				position: relative;
			}
			
			&.active {
				text {
					color: #007AFF;
					
					&::after {
						content: '';
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background-color: #007AFF;
						border-radius: 2rpx;
					}
				}
			}
		}
	}
	
	.appointment-list {
		padding: 20rpx 30rpx;
		
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 0;
			
			image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 40rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #999999;
			}
		}
		
		.appointment-item {
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
			
			.appointment-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.appointment-id {
					font-size: 28rpx;
					color: #666666;
				}
				
				.appointment-status {
					font-size: 26rpx;
					padding: 6rpx 20rpx;
					border-radius: 20rpx;
					
					&.pending {
						background-color: #E6F7FF;
						color: #007AFF;
					}
					
					&.completed {
						background-color: #F6FFED;
						color: #52C41A;
					}
					
					&.cancelled {
						background-color: #FFF1F0;
						color: #FF4D4F;
					}
				}
			}
			
			.appointment-content {
				border-bottom: 1rpx solid #EEEEEE;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				
				.info-row {
					display: flex;
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						width: 140rpx;
						font-size: 28rpx;
						color: #999999;
					}
					
					.value {
						flex: 1;
						font-size: 28rpx;
						color: #333333;
						
						&.cancel-reason {
							color: #FF4D4F;
						}
					}
				}
			}
			
			.appointment-footer {
				display: flex;
				justify-content: flex-end;
				
				.btn {
					padding: 0 40rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
					
					&.cancel-btn {
						background-color: #FFF1F0;
						color: #FF4D4F;
					}
					
					&.detail-btn {
						background-color: #F0F7FF;
						color: #007AFF;
					}
				}
			}
		}
	}
}
</style> 